<script>
import {defineComponent} from 'vue'
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
// 配置Swiper使用Autoplay插件

export default defineComponent({
    name: "siperText",
    mounted() {
        new Swiper('.swiper-container', {
            direction: "vertical",
            autoplay: true,
            loop: true,
            height: 38,
            loopedSlides:6,


        })
    }

})
</script>

<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper-wrapper">
                        <p>
                            <span class="sp1">山西拟禁售冥币等用品惹争议，烧纸是迷信和浪费</span>
                            <span class="sp2">2021-08-29</span>
                        </p>
                    </div>
                    <div style="background-color:#33c2f2;height: 1px;margin-top: -5px"></div>
                </div>
                <div class="swiper-slide ">
                    <div class="swiper-wrapper">
                        <p>
                            <span class="sp1">布林肯宣布悬赏500万美元通缉一中国公民，</span>
                            <span class="sp2">2021-08-30</span>
                        </p>
                    </div>
                    <div style="background-color:#33c2f2;height: 1px;margin-top: -5px"></div>
                </div>
                <div class="swiper-slide ">
                    <div class="swiper-wrapper">
                        <p>
                            <span class="sp1">人乳交易乱象：一些成年男人自称想“补身体”</span>
                            <span class="sp2">2021-08-31</span>
                        </p>
                    </div>
                    <div style="background-color:#33c2f2;height: 1px;margin-top: -5px"></div>
                </div>
                <div class="swiper-slide ">
                    <div class="swiper-wrapper">
                        <p>
                            <span class="sp1">中央网信办：取消明星艺人榜单，严禁呈现互撕</span>
                            <span class="sp2">2022-09-01</span>
                        </p>
                    </div>
                    <div style="background-color:#33c2f2;height: 1px;margin-top: -5px"></div>
                </div>
                <div class="swiper-slide ">
                    <div class="swiper-wrapper">
                        <p>
                            <span class="sp1">残奥-重赛还是金牌！女子50米自S11马佳破世</span>
                            <span class="sp2">2022-09-02</span>
                        </p>
                    </div>
                    <div style="background-color:#33c2f2;height: 1px;margin-top: -5px"></div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
        </div>
    </div>


</template>

<style scoped lang="less">
p {
  color: #33c2f2;
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  margin-top: 5px;
  width: 100%;
}

.sp1 {
  width: 70%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swiper-container {
  width: 100%;
  height: 100%;
}



</style>